<!--
 * @Date: 2024-11-21 19:04:29
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-01-02 13:57:01
 * @Description: 主页设计的z
-->
<template>
  <div class="hp-design-center">
    <div class="hp-design-center__main">
      <div class="hp-design-center__action">
        <div class="action-left">
        </div>
        <div class="action-right">
          <div class="action-item" title="预览" @click="handlePreview">
            <el-tooltip content="预览" placement="bottom">
              <RkIcon name="ele-VideoPlay" size="16px"/>
            </el-tooltip>
          </div>
          <div class="action-item" title="查看数据" @click="handleViewData()">
            <el-tooltip content="查看数据" placement="bottom">
              <RkIcon name="ele-Reading" size="16px"/>
            </el-tooltip>
          </div>
          <!-- <div class="action-item" title="导入数据">
            <el-tooltip content="导入数据" placement="bottom">
              <RkIcon name="ele-Upload" size="16px"/>
            </el-tooltip>
          </div> -->
        </div>
      </div>
      <div class="hp-design-center__canvas">
        <GridLayout :="layoutAttrs" v-model:layout="state.layouts" >
          <GridItem
            ref="gridItemRef"
            v-for="item in state.layouts" :key="item.i"
            :="item"
            :id="item.i"
            :class="[ state.checkedNode && state.checkedNode.i === item.i ? 'checked' : '' ]"
            @click="clickLayoutGrid(item)"
          >
            <PanelNode :grid="item" />
            <span class="tool-item info" @click.stop="handleViewData(item)">
              <el-button size="small" type="primary" :icon="Reading" circle />
            </span>
            <span class="tool-item remove" @click.stop="hpDesigner.removeLayoutItem(item.i)">
              <el-button size="small" type="danger" :icon="Delete" circle />
            </span>
          </GridItem>
        </GridLayout>
      </div>
    </div>
    <PreviewDrawer ref="hpPreviewRef" />
    <CodeStudioDialog ref="codeDialogRef" title="查看数据" codeType="json" :readOnly="true" :showFooter="false" />
  </div>
</template>

<script setup>
import { inject, ref } from 'vue';
import { Delete, Reading } from '@element-plus/icons-vue'
import { PanelNode } from '@hp/comps/node'
import { GridLayout, GridItem } from 'grid-layout-plus'

import { RkIcon } from '@/components/rk-icon'

import PreviewDrawer from '@hp/comps/preview/PreviewDrawer.vue'
import CodeStudioDialog from '@hp/comps/dialog/src/CodeStudioDialog.vue'

const hpDesigner = inject('hpDesigner')
const layoutAttrs = inject('layoutAttrs')

const { state } = hpDesigner

// gridItem的Ref对象
const gridItemRef = ref()
/**
 * 布局模块选中
 * 
 * @param gridItem 选择的数据
 */
const clickLayoutGrid = (gridItem) => {
  // 展开式属性配置侧边栏
  hpDesigner.state.rightSideCollapse = false
  // 防止重复点击
  if (state.checkedNode && state.checkedNode.i === gridItem.i) return
  // 设置选中节点
  hpDesigner.setCheckedNode(gridItem)
}

// 预览抽屉Ref
const hpPreviewRef = ref(null)
/**
 * 点击预览按钮
 * 
 * @description
 * 1. 获取当前布局数据
 * 2. 传递给PreviewDrawer的handleOpen方法,打开预览
 */
const handlePreview = () => {
  const layouts = hpDesigner.getDesignData()
  hpPreviewRef.value.handleOpen(layouts)
}
// 编码对话框Ref
const codeDialogRef = ref(null)
/**
 * 查看布局数据
 * @param {Object} item 选中的面板,如果不传则是查看所有布局
 */
const handleViewData = (item) => {
  const layouts = item ? item.schema : hpDesigner.getDesignData()
  codeDialogRef.value.handleOpen(JSON.stringify(layouts, null, '  '))
}

</script>

<style lang="scss" scoped>
.hp-design-center {
  position: relative;
  height: 100%;
  width: 0;
  flex: 1;
  transition: all .3s;
  background-size: 15px 15px;
  background-image: linear-gradient(#fafafc 14px, transparent 0), linear-gradient(90deg, transparent 14px, #373739 0);
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  
  &__main {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  &__action {
    display: flex;
    padding: 0 .5rem 0 .5rem;
    height: 38px;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom: 1px solid #d9d9d9;
    .action-left {
      display: flex;
      align-items: center;
      height: 100%;
    }
    .action-right {
      flex: 1;
      display: flex;
      align-items: center;
      height: 100%;
      justify-content: right;
    }
    .action-item {
      color: #000000ab;
      height: 30px;
      display: flex;
      align-items: center;
      border-radius: 4px;
      padding-left: 8px;
      padding-right: 8px;
      cursor: pointer;
      &:hover {
        font-weight: 600;
        background-color: #f8f8f8;
        color: var(--el-color-primary);
      }
    }
  }
  &__canvas {
    flex: 1;
    padding: 5px 0;
    min-height: 100px;
    position: relative;
    // height: 100%;
    width: 100%;
    overflow: auto;
    overflow-x: hidden;
  }
}
:deep(.vgl-item:not(.vgl-item--placeholder)) {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 
              0 1px 6px -1px rgba(0, 0, 0, 0.02),
              0 2px 4px 0 rgba(0, 0, 0, 0.02);
  border: 1px solid #ececec;
  border-radius: 4px;
  background-color: #ffffff;
  &:hover {
    border: 1px dashed #409eff;
  }
  &.checked {
    border: 1px solid #409eff;
  }
}
:deep(.vgl-item__resizer) {
  &::before {
    border-color: #909399;
  }
}
:deep(.vgl-item--resizing) {
  opacity: 90%;
}
:deep(.vgl-item--static) {
  background-color: #cce;
}
.columns {
  columns: 120px;
}
.tool-item {
  position: absolute;
  cursor: pointer;
  :deep(.el-button--small) {
    --el-button-size: 20px;
  }
  &.copy {
    top: -10px;
    right: 30px;
  }
  &.info {
    top: -10px;
    right: 30px;
  }
  &.remove {
    top: -10px;
    right: 5px;
  }
}
</style>